<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/*外边距margin属性
			margin使用问题1：自适应居中，建议使用div 套块元素 行块内元素、行内元素
			使用问题2 行元素 上下外边距失效 右左外边距---
			行元素：不可以设置高宽 【高--不可以动上下】在一行内显示【宽-可以左右】 无法居中 内置文本
	       使用问题3：垂直外边距
		   使用问题4：垂直外边距
			*/
			
			img{
				border:1px solid red;
				/*margin1个属性值  顺时针：上 右 下 左*/
				margn:200px;
				/*margin2个属性值  顺时针：上 下 右 左*/
				margn: 10px 200px;
				/* 常用：盒子自适应居中 ---失效 
				     行内块：可以设置高宽、在一行内显示 无法居中
					 margin使用问题1： 自适应居中，必须设置宽高
				*/
				margn: 0 auto;
				/*margin3个属性值  顺时针：上 右 左 下*/
				margn:100px 200px 300px;
				/*margin3个属性值  顺时针：上 右 下 左*/
				margn:100px 200px 300px 400px;
			}
			h1{
				/* 块元素：可以设置高宽、不在一行显示 无法居中 内置文本
				text-align：center
				*/
				width: 100%;
				border: 1px solid red;
				text-align: center;
				margin: 200px 200px;
			}
			span{
				/* 行元素：不可以设置高宽 【高--不可以动上下】在一行内显示【宽-可以左右】 无法居中 内置文本
				text-align：center
				*/
				width: 100%;
				border: 1px solid red;
				margin: 100px 200px;
				
			}
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 框模型、盒子模型：四个部分组成：
		                     外边距：边框以外四周，叫做外边距
							 margin属性
							 边框：--
							 内边距：边框以内 与内容 之间距离，叫做内边距
							 内容：块、行、行内元素本身宽高
		所有元素存在于框模型中 -->
		<div>
		<h1>块级元素</h1>
		<img src="img/123.gif" width="260px" height="260px" alt="圣诞">
		<span>行内元素：圣诞</span>
		</div>
		
	</body>
</html>